<template>
    <div id="root">
         <div class="container">
             <div class="title">登录</div>
             <el-row>
               <el-col :span="6">用户名:</el-col>
                <el-col :span="16"><el-input v-model="form.username" placeholder="请输入用户名"></el-input></el-col>
                 <el-col :span="2">&nbsp;</el-col>
             </el-row>
             <el-row style="margin-top: 8px;">
               <el-col :span="6">密码:</el-col>
                <el-col :span="16"><el-input  type="password" v-model="form.password" placeholder="请输入密码"></el-input></el-col>
                <el-col :span="2">&nbsp;</el-col>
             </el-row>
             <el-row style="margin-top: 30px;">
               <el-col :span="2" style="color: #ffffff;">  登录</el-col>
               <el-col :span="20"><el-button style="width: 100%;" type="success" @click="onSubmit" >登录</el-button></el-col>
               <el-col :span="2">&nbsp;</el-col>
             </el-row>
           <div style="text-align: left;margin: 10px;margin-left: 20px;">
             <el-link type="primary" @click="dialogFormVisible = true">没有账号？立即注册！</el-link>
             <el-link style="float: right;" type="primary" @click="dialogSetVisible = true">忘记密码？</el-link>
           </div>



         </div>
      <!-- Form -->

      <el-dialog title="注册" :visible.sync="dialogFormVisible"  width="500px" style="text-align: left;">
        <el-form :model="user" label-width="120px">
          <el-form-item label="用户名" >
            <el-input v-model="user.username" require style="width: 260px;"></el-input>
          </el-form-item>
          <el-form-item label="密码" >
            <el-input type="password" placeholder="默认为123456" v-model="user.password" require autocomplete="off" style="width: 260px;"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" style="height: 49px;">
            <el-input type="password" v-model="againPassword" require autocomplete="off" @change="checkPassword" style="width: 260px;"></el-input>
            <br/><span v-show="passwordFlag" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">两次输入的密码不匹配</span>
          </el-form-item>
          <el-form-item label="验证邮箱" prop="email" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
            <el-input type="email" v-model="user.email" require style="width: 200px;"></el-input>
            <el-button style="width: 60px;" type="success" icon="el-icon-s-promotion" @click="sendCode" :loading="loadingFlag"></el-button>
          </el-form-item>
          <el-form-item label="验证码"  style="height: 49px;">
            <el-input v-model="code" require style="width: 260px;" @change="checkCode"></el-input>
            <br/><span v-show="codeFlag" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">请输入6位验证码</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onRegister()">确 定</el-button>
        </div>
      </el-dialog>


<!--      修改密码-->
      <el-dialog title="忘记密码" :visible.sync="dialogSetVisible"  width="500px" style="text-align: left;">
        <el-form :model="user" label-width="120px">

          <el-form-item label="密码" >
            <el-input type="password" placeholder="默认为123456" v-model="user.password" autocomplete="off" style="width: 260px;"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" style="height: 49px;">
            <el-input type="password" v-model="againPassword" autocomplete="off" @change="checkPassword" style="width: 260px;"></el-input>
            <br/><span v-show="passwordFlag" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">两次输入的密码不匹配</span>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
            <el-input type="email" v-model="user.email" require style="width: 200px;"></el-input>
            <el-button style="width: 60px;" type="success" icon="el-icon-s-promotion" @click="sendPasswordCode" :loading="loadingFlag"></el-button>
          </el-form-item>
          <el-form-item label="验证码"  style="height: 49px;">
            <el-input v-model="code" require style="width: 260px;" @change="checkCode"></el-input>
            <br/><span v-show="codeFlag" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">请输入6位验证码</span>
          </el-form-item>
        </el-form>
        <el-link type="primary" title="max_alice@qq.com">邮箱已失效？联系客服</el-link>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSetVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogSetVisible = false;onSetPassword()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {login,getLoginUser,register,sendEmailCode,sendEmailCodePut,setPassword} from '@/api/admin'
import {setToken,setLoginUser,isLogin} from '@/utils/auth'
export default {

  data () {
    return {
      dialogSetVisible:false,  //修改密码弹窗
      loadingFlag:false,
      passwordFlag:false,  //密码不匹配
      codeFlag:false,   //验证码不匹配
      code:'',
      againPassword:'',
      dialogFormVisible:false,
      user:{},
      form:{
          username:"root",
          password:"123456",
      },
    }
  },
  // 过滤器
  filters:{


  },
  created(){
    //已经登录不需要再次登陆
    if(isLogin()) {
      this.$router.push("/main")
    }
  },
  methods: {
    onSetPassword(){ //设置密码
      setPassword({"password":this.user.password,"code":this.code,"email":this.user.email}).then(res=>{
        if(res.data.success){
          this.$message({type:"success",message:"重置成功"});
          this.form.username = this.user.email;
          this.dialogSetVisible = false;
        }
      })
    },
    checkPassword(){
      // 验证密码
      if(this.againPassword != this.user.password){
        this.passwordFlag = true;
      }else this.passwordFlag = false;
    },
    checkCode(){
      // 验证密码
      if(this.code==null||this.code.length!=6){
        this.codeFlag = true;
      }else this.codeFlag = false;
    },
    setFlag(){
      this.loadingFlag = false;
    },
    sendCode(){ //发送注册验证码
      this.loadingFlag = true;
      sendEmailCode({"email":this.user.email}).then(res=>{
        if(res.data.success){
          this.$message("已发送");
          setTimeout(this.setFlag,3000);
        }else this.loadingFlag = false;
      },error=>{
        this.loadingFlag = false;
      })
    },
    sendPasswordCode(){//发送设置密码的验证码
      this.loadingFlag = true;
      sendEmailCodePut({"email":this.user.email}).then(res=>{
        if(res.data.success){
          this.$message("已发送");
          setTimeout(function (){
            this.loadingFlag = false;
          },3000);
        }else this.loadingFlag = false;
      },error=>{
        this.loadingFlag = false;
      })
    },
    onRegister(){ //注册
      register({"user":this.user,"code":this.code}).then(res=>{
        if(res.data.success){
          this.$message({type:"success","message":"注册成功"});
          this.dialogFormVisible = false;
          this.form.username = this.user.username;
        }
      })
    },
    onSubmit(){
      login(this.form).then(res=>{
          if(res.data.success){ //登录成功
              setToken(res.data.data);
              //获取用户信息
              getLoginUser({"token":res.data.data}).then(res1=>{
                setLoginUser(res1.data.data);
                this.$router.push('/main');
                // console.info(res1.data.data);
              })



          }
      })
    },
  }
}
</script>

<style scoped>
    #root{
        width: 100%;
        height: 100%;
        background-image: url(../assets/bg.jpg);
        background-repeat: round;
        border: #fff solid 1px;
    }

    #root .container{
        width: 500px;
        height: 350px;
        background-color: #Fff;
        margin: 150px auto;
        border-radius: 10px;
    }
    #root .title{
        height: 150px;
        line-height: 150px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
    }
</style>
